<script setup lang="ts">
import { ref, reactive, onMounted, toRaw } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import uploadImg from "../../../components/ImageUpload/uploadImg.vue";
import { useCommunityNameList, useActivityStatus } from "@/hooks/index";
import Editor from "../../../components/Table/Editor";
import { timeToTimestamp } from "../../../utils/Fw-data";
import {
  postActivityInfoApi,
  editActivityInfoApi,
  getActivityInfoApi,
} from "../../../api/active";

// ------------------------------------------

// ================================================================
const isShow = ref(false);
const formRef = ref();
const direction = ref("rtl");
const emit = defineEmits(["updateList"]);

const defaultTime = new Date(2000, 1, 1, 12, 0, 0);

const getActivityStatus = useActivityStatus();
const getCommunityNameList = useCommunityNameList();
// const getTimeToTimestamp = timeToTimestamp()

// 表单数据
const defaultState = {
  community_code: "", // 所属小区
  title: "", // 活动主题
  place: "", // 活动地点
  sponsor_unit: "", // 举办单位
  begin_time: "", // 活动开始时间
  end_time: "", // 活动结束时间
  status: "", // 活动状态
  photo: "", // 图片
  content: "", // 活动内容
  id: null,
};
const formData = reactive({ ...defaultState });
// 验证规则
const formRules = {
  community_code: [{ required: true, message: "请选择", trigger: "change" }],
  title: [{ required: true, message: "请选择", trigger: "blur" }],
  place: [{ required: true, message: "请选择", trigger: "blur" }],
  sponsor_unit: [{ required: true, message: "请选择", trigger: "blur" }],
  begin_time: [{ required: true, message: "请选择", trigger: "blur" }],
  end_time: [{ required: true, message: "请选择", trigger: "blur" }],
  status: [{ required: true, message: "请选择", trigger: "blur" }],
  photo: [{ required: true, message: "请选择", trigger: "blur" }],
  // content: [{ required: true, message: "请选择", trigger: "blur" }],
};

onMounted(() => {
  console.log(formData);
  console.log(getCommunityNameList);
});

// ================================================================
// 表单提交事件
const onSubmit = async () => {
  try {
    // 表单校验
    await formRef.value.validate();
    // 整理数据
    // formData.begin_time = Date.parse(formData.begin_time);
    // formData.end_time = Date.parse(formData.end_time);
    // 提交数据
    const data = toRaw(formData);
    console.log(data);
    formData.id
      ? await editActivityInfoApi(data)
      : await postActivityInfoApi(data);
    // 提示成功
    ElMessage.success("操作成功");
    // 关闭弹框
    isShow.value = false;
    // 列表更新
    emit("updateList");
  } catch (error) {
    console.log(error);
  }
};
// 表单关闭事件
const handleClose = () => {
  // 移除校验
  formRef.value.resetFields();
  // 重置表单数据
  Object.assign(formData, { ...defaultState });
  // 关闭表单
  isShow.value = false;
};
// 修改回显
const replyData = async (id) => {
  // 发起请求
  const { data } = await getActivityInfoApi(id);
  console.log(data);

  Object.assign(formData, data);
  isShow.value = true;
};

//--------------------------------
const changeInput = (value) => {
  formData.content = value;
};

const changeTime = () => {
  formData.begin_time = formData.begin_time.getTime();
};
const changeData = () => {
  formData.end_time = formData.end_time.getTime();
};

// -------------------------------------------------------------
defineExpose({
  isShow,
  replyData,
});
</script>

<template>
  <el-drawer
    v-model="isShow"
    title="新增活动"
    size="50%"
    :direction="direction"
    :before-close="handleClose"
  >
    <!-- <template #header>
      <h4>新增活动</h4>
    </template> -->

    <template #default>
      <el-form
        :model="formData"
        ref="formRef"
        :rules="formRules"
        label-width="80px"
        :inline="true"
        size="normal"
      >
        <el-form-item label="所属小区" prop="community_code">
          <el-select v-model="formData.community_code" placeholder="请输入">
            <el-option
              v-for="item in getCommunityNameList"
              :key="item.id"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动主题" prop="title">
          <el-input
            v-model="formData.title"
            placeholder="请输入"
            size="normal"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="活动地点" prop="place">
          <el-input
            v-model="formData.place"
            placeholder="请输入"
            size="normal"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="举办单位" prop="sponsor_unit">
          <el-input
            v-model="formData.sponsor_unit"
            placeholder="请输入"
            size="normal"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="活动开始时间" prop="begin_time" size="normal">
          <el-date-picker
            @change="changeTime"
            v-model="formData.begin_time"
            type="datetime"
            placeholder="请输入"
            :default-time="defaultTime"
          />
        </el-form-item>
        <el-form-item label="活动结束时间" prop="end_time" size="normal">
          <el-date-picker
            @change="changeData"
            v-model="formData.end_time"
            type="datetime"
            placeholder="请输入"
            :default-time="defaultTime"
          />
        </el-form-item>
        <el-form-item label="活动状态" prop="status" size="normal">
          <el-radio-group v-model="formData.status">
            <el-radio
              v-for="item in getActivityStatus"
              :key="item.value"
              :label="item.value"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="图片" prop="photo" size="normal">
          <uploadImg v-model:imgUrl="formData.photo" />
        </el-form-item>
        <el-form-item label="活动内容" prop="content" size="normal">
          <!-- 富文本编辑器 -->
          <Editor
            :value="formData.content"
            :min-height="100"
            @update:input="changeInput"
          />
        </el-form-item>
      </el-form>
    </template>

    <template #footer>
      <div style="flex: auto">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style scoped></style>
